<!--
	作者：2575202388@qq.com
	时间：2018-10-14
	描述：首页统计
-->

<template>
    <Card :bordered="false" style="height:430px;">
        <p slot="title">
         	<Icon type="ios-pulse" style="color:#5d5386;font-size: 18px;"/>	             	
        	<span style="padding-left:2px;color:#333333;font-size: 14px;font-weight: normal;">登记统计五</span>
        </p>
        <div style="width:100%;float:left;text-align: center;" align="center">
        	<div ref="static5" style="width:100%;min-width: 600px; float:left;height:330px;"></div>
        </div>
    </Card>
</template>

<script>
	import Highcharts from 'highcharts'
	require('highcharts/modules/exporting')(Highcharts);
	export default {
		name:"static5",
		props: {
    		bmzqlist:{
    			type: Array
    		}
    	},
		components: {
		},
		mounted(){
		    
		},
		methods: {
		    drawLine(){
		    	var bmzqlist=this.bmzqlist;
		    	var cate=[];
		    	var zrs=[];
		    	var ddz=[];
		    	var cg=[];
		    	var wcg=[];
		    	for(var i=0;i<bmzqlist.length;i++){
		    		cate.push(bmzqlist[i].CSNAME);
		    		zrs.push(bmzqlist[i].ZRS);
		    		ddz.push(bmzqlist[i].DDZ);
		    		cg.push(bmzqlist[i].CG);
		    		wcg.push(bmzqlist[i].WCG);
		    	}
	
			    var chart = Highcharts.chart(this.$refs.static5, {
				    chart: {
				        type: 'column'
				    },
				    lang:{ 
						downloadJPEG: "下载JPEG 图片",  
						downloadPDF: "下载PDF文档"  ,
						downloadPNG: "下载PNG 图片",
						downloadSVG: "下载SVG 矢量图" , 
						exportButtonTitle: "导出图片"  ,
				    },  
				    title: {
				        text: '登记人数中签统计'
				    },
				    xAxis: {
				        categories: cate,
				        crosshair: true
				    },
				    yAxis: {
				        min: 0,
				        title: {
				            text: '人数'
				        }
				    },
				    tooltip: {
				        // head + 每个 point + footer 拼接成完整的 table
				        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
				        '<td style="padding:0"><b>{point.y:.1f} 人</b></td></tr>',
				        footerFormat: '</table>',
				        shared: true,
				        useHTML: true
				    },
				    plotOptions: {
				        column: {
				            borderWidth: 0
				        }
				    },
				    series: [{
				        name: '登记总人数',
				        data:zrs
				    },{
				        name: '等待摇号中',
				        data:ddz
				    }, {
				        name: '中签人数',
				        data: cg
				    }, {
				        name: '未中签人数',
				        data: wcg
				    }]
				});

		    }
		},
		watch:{
			bmzqlist(news,olds){
				if(news){
					this.drawLine();
				}
			}
		},
	}
</script>

<style>
</style>



